import { useState, useEffect, useContext } from 'react';
import { NavBar, List, Switch, Toast } from "antd-mobile";
import { useHistory, useRouteMatch } from "react-router-dom";

import GroupMemberSelectContactor from '../../../components/GroupMemberSelectContactor';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const { mockConfig: { userId: myUserId } } = mySdkStore;
  const { params: { cid } } = useRouteMatch();
  const [settings, setSettings] = useState({});
  const [conversationDetail, setConversationDetail] = useState({});
  const [groupMemberSelectContactorProp, setGroupMemberSelectContactorProp] = useState({visible: false, getListApi: '', onOk: () => {}, onClose: () => {}});

  // 获取群设置信息
  useEffect(async () => {
    const { groupSetting } = await mySdkStore.sdk.queryGroupSetting({ cid });
    setSettings(groupSetting);
  }, []);

  // 获取当前回话信息
  useEffect(async () => {
    const info = await mySdkStore.sdk.querySingleConversation({ cid });
    setConversationDetail(info);
  }, []);

  // 选择“群主”后回调
  const handleTransferOwner = async (userId) => {
    await mySdkStore.sdk.updateGroup({cid, updateType: 'owner', group: { ownerId: userId } });
    Toast.show('转让成功');
    setGroupMemberSelectContactorProp({ visible: false });
  }

  // 处理点击“转让群主”事件，展示“选择群主”界面
  const handleAddAdminVisible = async () => {
    setGroupMemberSelectContactorProp({
      visible: true,
      title: '转让群主',
      cid,
      getListApi: 'listGroupMembers',
      listFilterFunc: (list) => list.filter(item => item.roleId !== 1),
      onOk: handleTransferOwner,
      onClose: () => setGroupMemberSelectContactorProp({ visible: false})
    });
  }

  // 处理变更群设置事件
  const handleChangeSetting = async (changedInfo) => {
    await mySdkStore.sdk.saveGroupSetting({ cid, groupSetting: changedInfo });
    setSettings({ ...settings, ...changedInfo });
  }

  return (<div className="chatGroupPermissionPage">
      <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>群管理</NavBar>
      {/* <List style={{ margin: '12px 0' }}>
        <List.Item extra={<Switch checked={settings.isAllowUser}  onChange={() => handleChangeSetting({ isAllowUser: !settings.isAllowUser })} />}>
          仅群主和管理员可管理
        </List.Item>
      </List> */}
      {/* <List style={{ margin: '12px 0' }}>
        <List.Item extra={<Switch />}>
          群快捷键
        </List.Item>
        <List.Item onClick={() => {}}>
          快捷键管理
        </List.Item>
      </List> */}
      <List style={{ margin: '12px 0' }}>
        <List.Item  onClick={() => history.push({ pathname: `/groupAdmin/${cid}`})}>
          群管理员
        </List.Item>
        {/* <List.Item extra={<Switch checked={settings.isAllowAdminTopMessage} onChange={() => handleChangeSetting({ isAllowAdminTopMessage: !settings.isAllowAdminTopMessage })} />}>
          仅群主和管理员可置顶消息
        </List.Item> */}
        {/* <List.Item extra={<Switch checked={setSettings.isAllowAdminAtAll} onChange={() => handleChangeSetting({ isAllowAdminAtAll: !settings.isAllowAdminAtAll })}  />}>
          仅群主和管理员可@所有人
        </List.Item> */}
      </List>
      {/* <List style={{ margin: '12px 0' }}>
        <List.Item extra={<Switch checked={setSettings.isAllowSearchGroupId}  onChange={() => handleChangeSetting({ isAllowSearchGroupId: !settings.isAllowSearchGroupId })}  />}>
          群可被搜索
        </List.Item>
      </List> */}
      <List style={{ margin: '12px 0' }}>
        <List.Item onClick={() => { history.push({ pathname: `/groupPermissionMute/${cid}` })}}>
          群内设置禁言
        </List.Item>
        <List.Item extra={<Switch checked={settings.isShowHistoryMessage} onChange={() => handleChangeSetting({ isShowHistoryMessage: !settings.isShowHistoryMessage })}  />}>
          新成员可查看聊天历史
        </List.Item>
      </List>
      <List>
        <List.Item extra={<Switch checked={settings.isDisbandGroup} onChange={() => handleChangeSetting({ isDisbandGroup: !settings.isDisbandGroup })}  />}>
          群成员退群成员数{'<'}1时解散群
        </List.Item>
        <List.Item extra={<Switch checked={!settings.isAllowMemberTalkSecret} onChange={() => handleChangeSetting({ isAllowMemberTalkSecret: !settings.isAllowMemberTalkSecret })} />}>
          禁止群成员私聊
        </List.Item>
      </List>
      <List>
        <List.Item extra={<Switch checked={settings.isAllowNotice} onChange={() => handleChangeSetting({ isAllowNotice: !settings.isAllowNotice })}   />}>
          支持群公告
        </List.Item>
        <List.Item extra={<Switch checked={settings.isAllowInputAt} onChange={() => handleChangeSetting({ isAllowInputAt: !settings.isAllowInputAt })}  />}>
          试试直接输入@
        </List.Item>
      </List>
      { myUserId === conversationDetail.ownerId &&
      <List style={{ margin: '12px 0' }}>
        <List.Item onClick={handleAddAdminVisible}>
          转让群主
        </List.Item>
      </List>
      }
      { groupMemberSelectContactorProp.visible && <GroupMemberSelectContactor {...groupMemberSelectContactorProp} /> }
    </div>
  )
}